<template>
  <el-card class="categories-main" shadow="never">
    <p class="categories-main-title">分类 - {{ categories.length }}</p>
    <ul class="categories-main-list">
      <li v-for="categoriy of categories" :key="categoriy.id">
        <router-link
          :to="{
            name: 'PublicPage',
            params: { menuName: 'categories', label: categoriy.name },
          }"
          class="categoriy-link"
        >
          {{ categoriy.name }}
        </router-link>
      </li>
    </ul>
  </el-card>
</template>

<script>
import $api from "$api/categories";
export default {
  name: "CategoriesMain",
  data() {
    return {
      categories: [],
      title: "",
      isVisible: false,
    };
  },
  mounted() {
    this.getCategories();
  },
  methods: {
    getCategories() {
      $api.getCategories().then((res) => {
        if (res.status === 200) {
          this.categories = res.data;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.categories-main-title {
  color: white;
  text-align: center;
  font-size: 0.3rem;
  padding: 0.1rem;
  border-radius: 0.1rem;
  margin-bottom: 0.1rem;
  background-image: linear-gradient(45deg, #ff8cf1, #409EFF);
}

.categories-main-list li {
  width: 18%;
  height: 1rem;
  font-size: 0.2rem;
  line-height: 1rem;
  text-align: center;
  float: left;
  margin: 0.1rem 0.08rem;
  border-radius: 0.1rem;
  transition: all 0.3s;
  background-image: linear-gradient(45deg, #ff8cf1, #409EFF);
}

.categories-main-list .categoriy-link {
  color: white;
}

.categories-main-list .categoriy-link:hover {
  cursor: pointer;
  transform: scale(1.05);
}
</style>